@rightContentWidth: 260px;
@rightContainerWidth: calc(@rightContentWidth + 1rem);

.leftContainer {
  width: calc(100% - @rightContainerWidth);
  padding-right: 1rem;
}

.rightContainer {
  width: @rightContainerWidth;
  padding-left: 1rem;
}

.actionMenu {
  width: @rightContentWidth !important;
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
  @rightContentWidth: 190px;
  @rightContainerWidth: calc(@rightContentWidth + 1rem);

  .leftContainer {
    width: calc(100% - @rightContainerWidth);
  }

  .rightContainer {
    width: @rightContainerWidth;
  }

  .actionMenu {
    width: @rightContentWidth !important;
  }
}

@media only screen and (max-width: 767px) {
  .leftContainer {
    width: 100%;
    padding-right: 0 !important;
  }

  .actionMenu {
    width: 100% !important;
  }

  .rightContainer {
    padding-left: 0 !important;
    position: static !important;
    width: 100%;
  }
}

.actionMenu {
  min-height: 0 !important;
  margin-bottom: 0 !important;

  border-right: none !important;
  border-left-width: 2px !important;
  border-left-style: solid !important;
  border-left-color: rgba(34, 36, 38, 0.15) !important;

  :global(.item) {
    border-right: none !important;
    border-left-style: solid !important;
    border-left-color: transparent !important;
    margin: 0 0 0 -2px !important;
    border-left-width: 2px !important;

    &.menuItemImportant {
      background: #2185d0 !important;
      color: #fff !important;
      border-left-color: rgba(255, 255, 255, 0.6) !important;

      &:hover {
        background: #1678c2 !important;
        color: #fff !important;
        border-left-color: rgba(255, 255, 255, 0.45) !important;
      }
    }

    &.menuItemDangerous {
      color: #db2828 !important;
      border-left-color: rgba(219, 40, 40, 0.5) !important;

      &:hover {
        background: rgba(219, 40, 40, 0.03) !important;
        color: #db2828 !important;
        border-left-color: #db2828 !important
      }
    }

    &.menuItemPrimary {
      background: rgba(40, 110, 219, 0.03) !important;
      color: #1678c2 !important;
      border-left-color: rgba(40, 110, 219, 0.5) !important;

      &:hover {
        background: rgba(40, 110, 219, 0.07) !important;
        color: #1678c2 !important;
        border-left-color: #1678c2 !important
      }
    }

    &:hover {
      color: rgba(0, 0, 0, 0.95) !important;
      border-color: rgba(0, 0, 0, 0.95) !important;
      background-color: rgba(0, 0, 0, 0.03) !important;
    }

    > :global(.icon) {
      float: none !important;
      margin: 0 1em 0 0 !important;
    }

    > :global(.loader) {
      right: 16px;
      left: unset !important;
      transform: translateY(-50%) !important;
    }
  }
}
